<template>
  <div class="page home">
    <div class="pageHeader">
      <h1>
        <img src="~assets/img/logo.png" alt="" class="logo">
      </h1>
    </div>
    <div class="content">
      <div class="contentLeft">
        <div v-if="carouselList.length" key="hasCar" class="lbfilm">
          <el-carousel v-if="carouselList.length > 1" key="more" :interval="4000" type="card">
            <el-carousel-item v-for="(item, index) in carouselList" :key="index">
              <img v-if="item.cover_url" class="banner-img" :src="item.cover_url" @click="toPlay(item, 'carousel')" />
              <div v-else class="none" @click="toPlay(item, 'carousel')">
                暂无图片！
              </div>
            </el-carousel-item>
          </el-carousel>
          <img v-else key="one" class="one-img" :src="carouselList[0].cover_url" @click="toPlay(carouselList[0], 'carousel')" />
        </div>
        <div v-else key="noCar" class="lbfilm">
          <div class="none">
            暂无数据！
          </div>
        </div>


        <div v-if="pushList.length" key="hasPush" class="stfilm">
          <div v-for="(item, index) in pushList" :key="index" class="stfilm-item" @click="toPlay(item)">
            <img v-if="item.cover_url" :src="item.cover_url" class="stfilm-img" />
            <div v-else class="stfilm-img none">
              暂无图片！
            </div>
            <div class="stfilm-txt">
              {{item.name}}
            </div>
          </div>
        </div>
        <div v-else key="noPush" class="stfilm">
          <div class="none">
            暂无数据！
          </div>
        </div>

        <div class="gundong">
          <!-- <div class="none">
            暂无数据！
          </div> -->
        </div>
      </div>
      <div class="contentRight">
        <div v-if="channelList.length" key="hasChan" class="boxes">
          <div
            v-for="(item, index) in channelList"
            :key="index"
            class="box"
            :style="{'background': `url(${item.cover_url}) center center no-repeat`}"
            @click="toChannel(item, index)"
          >
            <!-- <div class="box-txt">
              {{item.name}}
            </div> -->
            
          </div>
        </div>
        <div v-else key="noChan" class="boxes">
          <div class="none">
            暂无数据！
          </div>
        </div>

        <div class="btnContent">
          <div class="btn btn_left"></div>
          <div class="btn btn_right"></div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="dialogVisible"
      title=""
      class="frameDialog"
      :fullscreen="true"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <iframe :src="iframeSrc" frameborder="0" class="iFrame"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
import * as api from '@/api'
export default {
  data() {
    return {
      carouselList: [],
      pushList: [],
      channelList: [],
      iframeSrc: '',
      dialogVisible: false
    }
  },
  methods: {
    toPlay(item, from = '') {
      if (item.content_type == 0) {
        this.$store.commit('setState', {
          name: 'playObj',
          value: item
        })
        this.$router.push({
          path: '/play',
          query: this.$route.query
        })
      } else if (item.content_type == 1) {
        this.iframeSrc = item.content
        this.dialogVisible = true
      } else {
        this.$message.warning('敬请期待！')
      }
    },

    toChannel(item, index) {
      if (item.home != -1) {
        this.$store.commit('setState', {
          name: 'channelObj',
          value: item
        })
        this.$router.push({
          path: '/channel',
          query: this.$route.query
        })
      } else {
        this.$message.warning('敬请期待！')
      }
      
    },
      
    parseStr() {
      let str = window.location.hash
      console.log('hash: ', str)
      let obj = qs.parse(str)
      return obj
    },

    // 8.1 获取首页轮播资源
    async platformCarousel() {
      let obj = this.parseStr()
      const { code, data } = await api.platform(this).platformCarousel({
        org_id: obj.org_id,
        app: obj.app_name
      })
      if (code === 0) {
        this.carouselList = data
      }
    },
    
    // 8.2 获取首页首推资源
    async platformPush() {
      let obj = this.parseStr()
      const { code, data } = await api.platform(this).platformPush({
        org_id: obj.org_id,
        app: obj.app_name
      })
      if (code === 0) {
        this.pushList = data
      }
    },
        
    // 8.3 获取首页频道列表
    async platformChannel() {
      let obj = this.parseStr()
      const { code, data } = await api.platform(this).platformChannel({
        org_id: obj.org_id,
        app: obj.app_name
      })
      if (code === 0) {
        this.channelList = data
      }
    },
  },
  created () {
    this.platformCarousel()
    this.platformPush()
    this.platformChannel()
  },
}
</script>
<style lang="stylus">
.home {
  padding: 0 getPx(60) 0 getPx(60);
  .content {
    position: absolute
    top: getPx(140)
    right: getPx(60)
    left: getPx(60)
    bottom: getPx(40)
    display:flex
    align-items center
    justify-content space-between
    .contentLeft, .contentRight {
      height 100%
      box-sizing: border-box
    }
    .contentLeft {
      width: getPx(940 + 80);
      margin-right:getPx(30)
      .lbfilm {
        width: 100%
        min-height: getPx(500)
        .none {
          min-height: getPx(450)
        }
        .el-carousel__container {
          height: getPx(430);  
        }
        .banner-img {
          height: 100%; 
          width: 100%; 
        }
        .one-img {
          cursor: pointer;
          display: block;
          width: 100%;
          height: getPx(430);  
        }
      }
      .stfilm {
        width: 100%
        height: getPx(270)
        overflow-x: auto
        display: flex 
        .stfilm-item {
          cursor: pointer;
          height: 100%;
          min-width: getPx(492);
          max-width: getPx(492);
          margin-right: getPx(35);
          .stfilm-img {
            display: block;
            width: 100%;
            height: getPx(230);
            &.none {
              display: flex;  
            }  
          }
          .stfilm-txt {
            margin-top: getPx(5);
            font-size: getPx(16);  
          }
        }
      }
      .gundong {
        width: 100%
        height: getPx(60)
        margin-top: getPx(20)
        background: #fff;
      }
    }
    .contentRight {
      width: getPx(710);
      .boxes {
        width: getPx(710);
        height: getPx(710);
        margin: 0 auto
        overflow-y: auto
        .box {
          float: left;
          width: getPx(212);
          height: getPx(212);
          border: 1px solid #fff;
          margin: 0 getPx(20) getPx(20) 0;
          background-size: cover !important;
          font-size: getPx(30); 
          box-sizing: border-box;
          cursor pointer;
          text-shadow: 0 0 getPx(10) #000;
          position: relative;
          .box-txt {
            height: getPx(80);
            position: absolute;
            left: getPx(10);
            bottom: 0;
          }
        }
      }
      .btnContent {
        height: getPx(139);
        width: getPx(710 - 32);
        flexMiddle(space-between);
        .btn {
          height: getPx(139);
          width: getPx(334 - 20);
          background-size: cover !important;
          cursor: pointer !important
          text-align: center
          font-size: getPx(24)
          &.btn_left {
            background: url('/platform/img/btn_left.png') center center no-repeat;
          }
          &.btn_right {
            background: url('/platform/img/btn_right.png') center center no-repeat;
          }
        }
      }
    }
  }
}
</style>